<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>控制面板</title>
	<style>
		.dashboard-container {
			position: relative;
			padding: 24px;
		}

		.rounded-full {
			border-radius: 9999px;
		}

		.w-20,
		[w-20=""] {
			width: 5rem;
		}

		.h-20,
		[h-20=""] {
			height: 5rem;
		}

		.mr-5,
		[mr-5=""] {
			margin-right: 1.25rem;
		}

		img,
		svg {
			display: inline-block;
		}

		.justify-around {
			justify-content: space-around;
		}

		.items-center {
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.h-full,
		.h100\% {
			height: 100%;
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="dashboard-container">

			<el-card shadow="never">
				<el-row justify="space-between">
					<el-col :span="18" :xs="24">
						<div class="flex h-full items-center">
							<img class="w-20 h-20 mr-5 rounded-full" src="/base/img/guide-girl.22854839.png" />
							<div>
								<p>[[${session.user.name}]] &nbsp;&nbsp;你好!</p>
								<p class="text-color-secondary">
									{{ greetings }}
								</p>
								<p class="text-color-secondary">
									基于 Kuscia&nbsp;(https://github.com/secretflow/kuscia) 的隐私计算的 web 框架，能够方便的使用基于保护隐私的数据智能和机器学习的能力
								</p>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
			<!-- 数据卡片 -->
			<el-row :gutter="10" class="mt-5">
				<el-col :span="6">
					<el-card shadow="never">
						<template #header>
							<div class="flex-x-between">
								<span class="text-color-secondary">节点数量</span>
								<el-tag type="success" size="small"><el-icon><Star /></el-icon></el-tag>
							</div>
						</template>

						<div class="flex-x-between mt-2">
							<!--<span class="text-lg"> 1</span>-->
							<svg-icon icon-class="user" size="2em" />
						</div>
						<div class="flex-x-between mt-2 text-sm text-color-secondary">
							<span> 总节点数量 </span>
							<span>{{datas.nodes}} </span>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="never">
						<template #header>
							<div class="flex-x-between">
								<span class="text-color-secondary">项目数量</span>
								<el-tag type="danger" size="small"><el-icon><Star /></el-icon></el-tag>
							</div>
						</template>

						<div class="flex-x-between mt-2">
							<!--<span class="text-lg"> 1</span>-->
							<svg-icon icon-class="user" size="2em" />
						</div>
						<div class="flex-x-between mt-2 text-sm text-color-secondary">
							<span> 总项目数量 </span>
							<span>{{datas.projects}} </span>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="never">
						<template #header>
							<div class="flex-x-between">
								<span class="text-color-secondary">数据数量</span>
								<el-tag type="primary" size="small"><el-icon><Star /></el-icon></el-tag>
							</div>
						</template>

						<div class="flex-x-between mt-2">
							<!--<span class="text-lg"> 1</span>-->
							<svg-icon icon-class="user" size="2em" />
						</div>
						<div class="flex-x-between mt-2 text-sm text-color-secondary">
							<span> 总数据数量 </span>
							<span>{{datas.datas}} </span>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="never">
						<template #header>
							<div class="flex-x-between">
								<span class="text-color-secondary">合作节点</span>
								<el-tag type="warning" size="small"><el-icon><Star /></el-icon></el-tag>
							</div>
						</template>

						<div class="flex-x-between mt-2">
							<!--<span class="text-lg"> 1</span>-->
							<svg-icon icon-class="user" size="2em" />
						</div>
						<div class="flex-x-between mt-2 text-sm text-color-secondary">
							<span> 总合作节点 </span>
							<span>{{datas.routes}} </span>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mt-5">
				<el-col :span="24">
					<el-card shadow="never">
						<template #header>
							<div class="flex-x-between">
								<span class="text-color-secondary">申请事项</span>
							</div>
						</template>
						<el-tabs v-model="activeApply" class="demo-tabs" @tab-click="handleClick">
					    <el-tab-pane label="我处理的" name="itodo"></el-tab-pane>
					    <el-tab-pane label="我发起的" name="ido"></el-tab-pane>
					  </el-tabs>
					  <el-empty description="暂无数据" ></el-empty>
					</el-card>
				</el-col>
			</el-row>
			<!--文档-->
			<!--<el-card shadow="never" class="mt-5">
				<el-timeline style="max-width: 600px">
					<el-timeline-item v-for="(activity, index) in activities" :key="index"
						:timestamp="activity.timestamp">
						{{ activity.content }}
					</el-timeline-item>
				</el-timeline>
			</el-card>-->
		</div>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const _data = {
		greetings: '一切化繁为简',
		activeApply: 'itodo',
		datas: {
			nodes: 0,
			projects: 0,
			datas: 0,
			routes: 0
		},
		activities: [
			{
				content: 'Event start',
				timestamp: '我的节点',
			},
			{
				content: 'Approved',
				timestamp: '合作节点',
			},
			{
				content: 'Success',
				timestamp: '数据源管理',
			},
			{
				content: 'Success',
				timestamp: '数据管理',
			},
			{
				content: 'Success',
				timestamp: '项目管理',
			},
			{
				content: 'Success',
				timestamp: '结果管理',
			},
		]
	}
	const _method = {
		getCssVarName: (type) => {
			return `--el-box-shadow${type ? '-' : ''}${type}`
		},
		handleClick(){
			
		},
		loadDatas(){
			let that = this
			getRequst('/account/datas').then(function (resp) {
				that.datas = resp.data;
			})
		}
	}
	function _created() {
		this.loadDatas()
	}
</script>

</html>